<template>
  <div class="main-area">
    <div class="search-area">
      <Form :model="searchForm" :label-width="80">
      <Row :gutter="16">
          <Col span="8">
            <Input v-model="searchForm.adminInput" clearable>
              <Select v-model="searchForm.adminType" slot="prepend" style="width: 80px">
                  <Option value="1">类型</Option>
                  <Option value="2">名称</Option>
              </Select>
            </Input>
          </Col>
          <Col span="8">
            <FormItem label="手机号">
                <Input v-model="searchForm.mobile"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <Button type="primary" shape="circle" icon="ios-search">Search</Button>
            <Button shape="circle" icon="ios-refresh-circle-outline">Reset</Button>
          </Col>
      </Row>
      </Form>
    </div>

    <div class="table-area">
      <Table
      :columns="columnsData"
      :table-data="adminList"
      />
    </div>
    <div class="page-area">
      <Page :total="100" show-sizer show-total
       :current="1"
       :page-size="10"
       :page-size-opts="[10,20,50,100]"
       @on-change="handlePageChange"
       @on-page-size-change="handlePageSizeChange"
       />
    </div>

  </div>
</template>

<script>
import Table from '@/components/Table';
import { adminList } from '@/request/api.js';
export default {
  data () {
    return {
      searchObject: {
        _page: 1,
        _limit: 10
      },
      searchForm: {
        adminInput: '',
        adminType: '',
        mobile: ''
      },
      columnsData: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: 'ID',
          key: 'id'
        },
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Email',
          key: 'email'
        },
        {
          title: 'Title',
          key: 'title'
        }
      ],
      adminList: []
    };
  },
  components: {
    Table
  },
  created() {
    this.getList();
  },
  methods:{
    getList() {
      adminList(this.searchObject).then((res) => {
        console.log(res.data);
        this.adminList = res.data;
      }).catch((err) => {
        console.log(err);
      });
    },
    handlePageChange(val) {
      console.log('切换页数', val);
    },
    handlePageSizeChange(val) {
      console.log('切换显示条目数', val);
    }
  }
};
</script>

<style lang="scss" scoped>
.ivu-form-item{
  margin: 0;
}
</style>
